<template>
  <div ref="PieChart01" style="width: 100%; height: 300px"></div>
  <!-- 固定格式 -->
</template>

<script>
import * as echarts from 'echarts'
// 固定格式

export default {
  data() {
    return {}
  },
  // 渲染 DOM 用 mounted
  mounted() {
    // 输出函数 initPie()
    this.initPie()
  },
  methods: {
    // 有函数 initPie() 就要输出
    initPie() {
      // 基于准备好的 DOM，初始化 echarts 实例
      const myChart = echarts.init(this.$refs.PieChart01)
      // 配置基本信息
      const option = {
        // 标题
        // title: {
        //   text: '饼图示例123'
        // },
        // 文本样式
        textStyle: {
          fontSize: 14
        },
        // 图表的工具栏
        toolbox: {
          show: true,
          // 预设
          feature: {
            mark: {
              show: true
            },
            // 数据预览 - 变成另外一种风格预览
            dataView: {
              show: true,
              readOnly: false
            },
            // 把数据从饼图切换为下拉展示数据的形式
            magicType: {
              show: true,
              type: ['pie', 'funnel']
            },
            // 重置
            restore: {
              show: true
            },
            // 保存为图片
            saveAsImage: {
              show: true
            }
          }
        },
        // 工具提示 鼠标经过盒子显示
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br />{b}: {c} ({d}%)'
        },
        // 显示对应数据展示的项
        legend: {
          //   orient: 'vertical',
          //   x: 'left',
          //   data: ['是', '否']
          x: 'left',
          data: ['早餐', '素菜', '肉类', '吊锅', '小吃', '饮料']
        },
        // x 坐标轴信息
        // xAxis: {
        //   data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        // },
        // y 坐标轴的信息
        // yAxis: {},
        // ***** 核心数据
        series: [
          {
            //     name: '访问来源',
            //     type: 'pie',
            //     selectedMode: 'single',
            //     radius: [0, '75%'],
            //     label: {
            //       normal: {
            //         show: true,
            //         formatter: '{b}({d}%)',
            //         position: 'inner'
            //       }
            //     },
            //     data: [
            //       {
            //         value: 175,
            //         name: '是',
            //         selected: true
            //       },
            //       {
            //         value: 352,
            //         name: '否'
            //       }
            //     ]
            //   }
            // ]
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '75%'],
            center: ['50%', '60%'],
            label: {
              normal: {
                show: true,
                formatter: '{b}({d}%)',
                position: 'inner'
              }
            },
            data: [
              {
                value: 175,
                name: '早餐',
                selected: true
              },
              {
                value: 352,
                name: '素菜'
              },
              {
                value: 170,
                name: '肉类'
              },
              {
                value: 20,
                name: '吊锅'
              },
              {
                value: 290,
                name: '小吃'
              },
              {
                value: 500,
                name: '饮料'
              }
            ]
          }
        ]
      }
      // 3.0 绘制图表
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
